<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>部门管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <style>
        .layui-btn-container {
           margin-top: 10px;
        }
        body{
            background: url(../../images/bg1.jpg) no-repeat;
            background-size: 2000px ;
        }
    </style>
</head>
<body>
<div class="layuimini-container ">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item" >

                        <div class="layui-inline">
                            <label class="layui-form-label">部门ID</label>
                            <div class="layui-input-inline ">
                                <input type="text" name="id" autocomplete="off" class="layui-input inputData">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">部门名称</label>
                            <div class="layui-input-inline ">
                                <input type="text" name="departmentName" autocomplete="off" class="layui-input inputData">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">部门负责人</label>
                            <div class="layui-input-inline ">
                                <input type="text" name="leader" autocomplete="off" class="layui-input inputData">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">部门人数</label>
                            <div class="layui-input-inline ">
                                <input type="text" name="count" autocomplete="off" class="layui-input inputData ">
                            </div>
                        </div>


                    </div>


                </form>

            </div>
        </fieldset>
        <div class="layui-inline" style="margin-left: -40px"><!--!!!!-->
            <label class="layui-form-label">输入ID</label>
            <div class="layui-input-inline ">
                <input type="text" name="value" autocomplete="off" class="layui-input inputData " id="val">
            </div>
        </div>
            <div class="layui-btn-container" id="btn">
                <button class="layui-btn layui-btn-lg layui-btn-danger data-delete-btn "lay-event="delete" id="delete">
                    <i class="layui-icon">&#xe640;</i>
                </button>
                    <button class="layui-btn layui-btn-normal layui-btn-lg data-add-btn "lay-event="add" id="add">
                        <i class="layui-icon">&#xe654;</i>
                    </button>
                    <button class="layui-btn layui-btn-normal layui-btn-lg data-add-btn "lay-event="add" id="search">
                        <i class="layui-icon"></i>
                    </button>
                <button class="layui-btn layui-btn-danger layui-btn-lg data-add-btn "lay-event="add" id="edit">
                    <i class="layui-icon">&#xe642;</i>
                </button>

            </div>
        <div action="" class="layui-form">
        <table class="layui-table" id="currentTableId" lay-filter="currentTableFilter">
            <thead>
            <tr class="layui-form-item"  >
                <th ><div>部门ID</div></th>
                <th ><div>部门名称</div></th>
                <th ><div>部门负责人</div></th>
                <th ><div>部门负责人ID</div></th>
                <th ><div>联系方式</div></th>
                <th ><div>部门邮箱</div></th>
                <th><div>部门人数</div></th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        </div>
    </div>
</div>
<script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'table','layer'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            layer = layui.layer;
        let jsonObj=JSON.parse(localStorage.getItem('part'));
         $('#search').on('click',function (){//////////////////////查询
           //  $('#inputData').children('input')
             let inputData=$('.inputData')
            let I0=inputData[0].value
             let I1=inputData[1].value
             let I2=inputData[2].value
             let I3=inputData[3].value
             for (let i=0;i<jsonObj.length;i++){
                 if (jsonObj[i].id==I0||jsonObj[i].departmentName==I1||jsonObj[i].leader==I2||jsonObj[i].count==I3){
                     layer.open({
                         type: 0,
                         title: '查询到的值<i class="layui-icon layui-icon-heart-fill" style="font-size: 30px; color: #1df569;"></i>',
                         content: '学生ID为:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="layui-icon layui-icon-username" style="font-size: 30px; color: #1df569;"></i>'+jsonObj[i].id+
                             '<br/>学生姓名为:&nbsp;&nbsp;&nbsp;&nbsp;<i class="layui-icon layui-icon-user" style="font-size: 30px; color: #1E9FFF;"></i>'+jsonObj[i].departmentName+
                             '<br/>学生班级为:&nbsp;&nbsp;&nbsp; <i class="layui-icon layui-icon-home" style="font-size: 30px; color: #02f86d;"></i>'+jsonObj[i].leader+
                             '<br/>学生联系方式为: &nbsp;&nbsp;&nbsp;<i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #f8b402;"></i>'+jsonObj[i].count,
                         skin: 'demo-class',
                         area: ['500px', '300px']
                     })
                     break;
             }else{
                     layer.open({
                         type: 0,
                         title: '未查询到的值<i class="layui-icon layui-icon-heart-fill" style="font-size: 30px; color: #fa0429;"></i>',
                         content:'<i class="layui-icon layui-icon-face-cry" style="font-size: 50px; color: #FF5722;"></i> 没有这个部门',
                         skin: 'demo-class',
                         area: ['500px', '300px']
                     })
                 }

             }

         })
        //选中
        // form.on('checkbox(check)', function(data){
        //     console.log(data.elem); //得到checkbox原始DOM对象
        //     console.log(data.elem.checked); //是否被选中，true或者false
        //     console.log(data.value); //复选框value值，也可以通过data.elem.value得到
        //     console.log(data.othis); //得到美化后的DOM对象
        //     console.log(data);
        //     sc=data;
        //     let chose=sc.value;
        //     localStorage.setItem('partchose',chose)
        // });
        //修改按钮
        $('#edit').on('click',function (){
            if(confirm('确定要修改吗')){
                var index = layer.open({   //弹出层定义
                    title: '修改用户',
                    type: 2,   //弹出页面
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: 'department-edit.html',
                });
                $(window).on("resize", function () {
                    layer.full(index);
                })
                del();
            }


        })
        //添加按钮
        $('#add').on('click',function (){
            var index = layer.open({   //弹出层定义
                title: '添加用户',
                type: 2,   //弹出页面
                shade: 0.2,
                maxmin:true,
                shadeClose: true,
                area: ['100%', '100%'],
                content: 'department-add.html',
            });
            $(window).on("resize", function () {
                layer.full(index);
            });
        })
        //全选按钮

        //删除
        $('#delete').click(function (){
            if(confirm('确定要删除吗')){
                del();
                location.reload()
            }

        })

    });
    /////////////////////////////////////////////////////////////////////////////////////////////
    //key 是json数据 IDC是数据长度用来定义Id序号 add是新增的数据 stu是学生的key
    if(localStorage.getItem('part')==null){  //获取初始数据
        $.ajax({
            url:'../../api/department.json',
            dataType:'json',
            success:function (data){
                let  jsonData=JSON.stringify(data.data)
                localStorage.setItem('part',jsonData)
                location.reload()
                let index=data.data.length
                localStorage.setItem('partindex',index)
            }
        })
    }
    ///////////////////////添加新数据////////////////////
    let jsonObj=JSON.parse(localStorage.getItem('part'));
    let oldData;
    let max;
    let min;

    if($('.page').length==0){//判断是否有分页条
         pageNum=4;
        let num=Math.ceil(jsonObj.length/3);
        newBtn(num);
        max=3;
        min=0;
        add(min,max);

    }else {
        add(min,max);
    }

    let page=$('.page').on('click',function (){//分页按钮点击事件
        let btnVal=$(this).html()//分页按钮中的数据
        $('tbody').html("")
        max=btnVal*3
        console.log(max)
        min=max-3
        add(min,max);

    })
    if(JSON.parse(localStorage.getItem('add'))!=null){//////////////////判断是否初始化
        jsonObj.push(JSON.parse(localStorage.getItem('add')));
        oldData=JSON.stringify(jsonObj)
        localStorage.removeItem('add1')
        localStorage.setItem('part',oldData)
        location.reload()
    }

    //删除函数

    function del(){//删除+选中函数函数
        let myValue=$('#val').val();
        localStorage.setItem('pchose',myValue);
        let delData=JSON.parse(localStorage.getItem('part'))
        for(let i=0;i<delData.length;i++){
            if (delData[i].id==myValue){
                delData.splice(i,1);
                $('.'+myValue).remove()
                localStorage.setItem('part',JSON.stringify(delData))
                break;
            }
        }
    }
    //添加函数
    function add(min,max){  //添加函数
        for (let i=min;i<max;i++){
            $('tbody').append(`<tr>
<td ><div>${jsonObj[i].id}</div></td>
<td ><div>${jsonObj[i].departmentName}</div></td>
<td ><div>${jsonObj[i].leader}</div></td>
<td ><div>${jsonObj[i].tid}</div></td>
<td ><div>${jsonObj[i].tel}</div></td>
<td ><div>${jsonObj[i].Email}</div></td>
<td><div>${jsonObj[i].count}</div></td>
</tr>`)

        }
    }

    //  新增按钮
    function newBtn(num){
        for(let i=0;i<num;i++){
            $('#btn').append(`
    <button class="layui-btn layui-btn-normal layui-btn-sm page" >${i+1}</button>
  `)
        }
    }
</script>
</body>
</html>